<template>
  <div class="goods-list">
    <goods-list-item v-for="item in goods" :goodsItem="item"></goods-list-item>
  </div>
</template>

<script>
  import GoodsListItem from "./GoodsListItem";
  export default {
    name: "GoodsList",
    components:{
      GoodsListItem
    },
    props:{
      goods:{
        type:Array,
        default(){
          return []
        }
      }
    }
  }
</script>

<style scoped>
  .goods-list {
    display: flex;
    /*属性规定flex容器是单行或者多行，
    同时横轴的方向决定了新行堆叠的方向
    wrap：规定灵活的项目在必要的时候拆行或拆列
    */
    flex-wrap: wrap;
    /*用于设置或检索弹性盒子元素在主轴上的对其方式
      spac-around：项目位于各行之前，之间，之后都留有空白
    */
    justify-content: space-around;
    background-color: var(--color-background);

    padding: 2px;
  }
</style>
